<template>
    <div class="settingQuick" v-show="modalshow">
        <div class="settingBox">
            <h3>快捷回复
                <img @click='closeModal' :src=closeIMG alt="">
            </h3>
            <ul class='skjhd'>
                <li :class="{active: current === item.personId}"
                    v-for='(item,index) in user'
                    :key='index'
                    @click='activePerson(item.personId,item.personName)'>
                    <a href="#">{{item.name}}</a>
                </li>

            </ul>
            <!-- <p class='reply'>
                <span>导入回复</span>
                <span>导出回复</span>
            </p> -->


            <div class="mainBOXQuick">
                <div class="left scrollbar">
                  

                    <el-tag
                            :key="tag.replys_group"
                            v-for="(tag,index) in dynamicTags"
                            closable
                            @click.native='handleClick(index,tag.id)'
                            :class='{currentEl: index == currentInputId}'
                            :disable-transitions="false"
                            @close='handleClose(tag.id,index,tag)'
                    >
                        <span class='edit'></span>

                        <span class='save' @click='handleSave(tag.id,index)'>保存</span>
                        <span class='cancel' @click='handleCancel(tag.replys_group,index)'>取消</span>
                        <!-- {{tag.replys_group}} -->
                        <input :value="tag.replys_group" :id="'group'+index"  type="text" @keyup.enter="handleSave(tag.id,index)" readonly="readonly">
                     </el-tag>
                    <el-input 
                            id='input'
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                    >
                    </el-input>

                </div>
                <!-- 分组里的内容 -->
                <div class="right scrollbar">
                    <el-tag
                            :key="TagContent.content"
                            v-for="(TagContent,index) in content"
                            closable
                            @click.native='handleChooseContent(index)'
                            :disable-transitions="false"
                            @close="handleContentClose(TagContent.id,index,TagContent)"
                    >
                        <span class='edit'></span>
                        <span class='save' @click='modifySave(TagContent.id,index)'>保存</span>
                        <span class='cancel' @click='handleCancelContent(TagContent.content,index)'>取消</span>
                        <input :id="'content'+index" type="text" :value="TagContent.content"  @keyup.enter='modifySave(TagContent.id,index)' readonly='readonly'>
                    </el-tag>
                    <el-input
                            class="input-new-tagSecond"
                            v-if="contentVisible"
                            v-model="AddContent"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="addReply"
                            @blur='addReply'
                    >
                    </el-input>
                </div>

                <div class="bottom">
                    <ul>
                        <li @click='showInput'>添加新分组</li>
                        <!-- <li>上移</li>
                        <li>下移</li>
                        <li>置顶</li> -->
                    </ul>
                </div>

                <div class="bottomRight">
                    <p @click='showReply'>添加新回复</p>
                </div>
            </div>

        </div>
    </div>
</template>


<script>
import bus from "../bus";
import chat from "../../libs/chat";
import contentQ from "../contentQ";
import quickyContent from "../../libs/quickyContent";

export default {
  name: "settingquick",
  data() {
    return {
      current: 1,
      DefaultName: "private", //默认显示个人的分组名和内容
      //showInput:false,    //显示输入分组框的名字
      inputValue: "", //分组名
      currentInputId: null, //选中的分组名
      // dynamicTags:'',    //渲染在页面上的分组名
      currentGroup: "", //当前分组名的id
      inputVisible: false,
      contentVisible: false,
      content: [], //分组下的内容
      AddContent: "", //分组下新增的内容
      inputContentVisible: false,
      inputContentVisible: "",
      modalshow: false,
      Customary:0,  //保存原来的值
      newValue:'',
      newValueContent:'',   
      closeIMG: require("../../assets/icon/close.png"),
      user: [
        {
          name: "个人",
          personId: 1,
          personName: "private"
        },
        {
          name: "公共",
          personId: 2,
          personName: "public"
        }
      ],
      replySetting:true,   //默认显示编辑和删除btn
      replySaveCancel:false,   //默认隐藏保存和取消btn
    };
  },

  props: ["dynamicTags"],
  methods: {
    //保存组名
    handleSave(id,index) {
      let newUserId = 0;
      let value = $('#group'+index).val();
      if (this.DefaultName === "private") {
        newUserId = chat.my().userId;
      }
      if(value !== ''){
          quickyContent.modify(id, value, newUserId, (res) => {
          if (res.code === 200) {

            $(".edit").css("display", "block");
            $(".save").css("display", "none");
            $("input").attr("readonly", true);
            $("input").removeClass("editDsable");
            $(".cancel").css("display", "none");
            this.dynamicTags[index].replys_group = value;
          }else{
            this.$message.error(res.error);
          }
        });
      }else{
          this.$message.error('分组名不能为空');
      }
      
    },

    //保存内容
    modifySave(id,index) {
      let newUserId = 0;
      let value = $('#content'+index).val();
      if (this.DefaultName === "private") {
        newUserId = chat.my().userId;
      }
      if(value !== ''){
        quickyContent.modifyContent(id, value, newUserId, (res) => {
          if (res.code === 200) {
            $(".edit").css("display", "block");
            $(".save").css("display", "none");
            $("input").attr("readonly", true);
            $("input").removeClass("editDsable");
            $(".cancel").css("display", "none");
            this.content[index].content = value;
          }else{
            this.$message.error(res.error);
          }
        });
      }else{
          this.$message.error('内容不能为空');
      }
        
    },

    //取消分组名
    handleCancel(name,index){
      $('#group'+index).val(name);
    },

    //取消内容
    handleCancelContent(name,index){
         $('#content'+index).val(name);
    },
    //删除分组
    handleClose(id,index,tag) {
      let _self = this;
      let userId = 0;
      let value = $('#group'+index).val();
      
      if (this.DefaultName === "private") {
          userId = chat.my().userId;
      }
      if(value !== ''){
            quickyContent.deleteExhibit(id, userId, function(res) {
              if(res.code === 200){
                for(let i = 0;i<_self.dynamicTags.length;i++){
                  if(_self.dynamicTags[i].id === id){
                    _self.content = '';
                  }
                }
                _self.dynamicTags.splice(_self.dynamicTags.indexOf(tag), 1);
                console.log(_self.dynamicTags);
              }else{
                _self.$message.error(res.error);
              }
        });
      }else{
         this.$message.error('删除分组名不能为空');
      }
     
      
    },

    //删除分组名对应的内容
    handleContentClose(id,index,TagContent) {
      let _self = this;
      let value = $('#content'+index).val();
      let newUserId = 0;
      if (this.DefaultName === "private") {
        newUserId = chat.my().userId;
      } 

      if(value !== ''){
          quickyContent.deleteExhibit(id, newUserId, function(res) {
            if(res.code === 200){
              _self.content.splice(_self.content.indexOf(TagContent), 1);
            }else{
              _self.$message.error(res.error);
            }
          });
      }else{
         this.$message.error('删除内容不能为空');
      }
       
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showReply() {
      console.log(this.dynamicTags);
      if (this.dynamicTags.length > 0) {
        if (this.currentGroup) {
          this.contentVisible = true;
          this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
          });
        } else {
          this.$message({
            message: "请选择分组",
            type: "warning"
          });
        }
      } else {
        this.$notify({
          title: "警告",
          message: "请先添加分组",
          type: "warning"
        });
      }
    },
    //添加新分组
    handleInputConfirm() {
      let _self = this;
      let inputValue = this.inputValue;
      let newUserId = 0 ;
      if (this.DefaultName === "private") {
          newUserId = chat.my().userId
      }
       if (inputValue) {
          quickyContent.addContent(newUserId, _self.inputValue, function(res) {
            if (res.code === 200) {
              _self.dynamicTags.push({
                id: res.data,
                replys_group: inputValue,
                content: []
              });
            }else{
             _self.$message.error(res.error);
            }
          });
        }

        this.inputVisible = false;
        this.inputValue = "";
        console.log(_self.dynamicTags);
    },

    

    // //当前分组下添加新回复
    addReply() {
      let _self = this;
      let Content = this.AddContent;
      let newUserId = 0;
      if (this.DefaultName === "private") {
        newUserId = chat.my().userId;
      }
      if (Content) {
          quickyContent.addReplyContent(
            newUserId,
            _self.currentGroup,
            Content,
            function(res) {
              if (res.code === 200) {
                _self.content.push({
                  id: res.data,
                  content: Content
                });
              } else {
                _self.$message.error(res.error);
              }
            }
          );
        }
        this.contentVisible = false;
        this.AddContent = "";
    },

    //判断是个人还是公用
    activePerson(personId, activePerson) {
      this.current = personId;
      this.DefaultName = activePerson;
      this.defaultExhibition(activePerson);
    },
    //快捷回复展示
    defaultExhibition(DefaultName) {
      let _self = this;
      let defaultName = DefaultName || _self.DefaultName; //默认显示值 || 或显示

      let newUserId = 0;
      if (defaultName === "private") {
          newUserId = chat.my().userId;
      }
      //console.log(newUserId)
      let box = [];
      quickyContent.Exhibition(newUserId, function(res) {
        if (res.code === 200 && res.data[defaultName]) {
          _self.content = [];
          let dataGroup = res.data[defaultName].group; //得到的分组名
          let dataContent = res.data[defaultName].content; //得到分组名下的内容
          for (let i = 0; i < dataGroup.length; i++) {
            let group = {
              id: dataGroup[i].id,
              replys_group: dataGroup[i].replys_group,
              content: []
            };
            for (let j = 0; j < dataContent.length; j++) {
              if (dataGroup[i].id === dataContent[j].group_id) {
                group.content.push({
                  id: dataContent[j].id,
                  content: dataContent[j].content
                });
              }
            }
            box.push(group);
          }
          _self.dynamicTags = box;
        } else {
          _self.$message({
            title: "设置快捷回复",
            message: res.error,
            type: "error"
          });
        }
      });
    },

    handleClick(index, id) {
      this.newValue = $('#group'+index).val();
      this.currentInputId = index; //下标
      this.currentGroup = id; //
      this.content = this.dynamicTags[index].content;
    },

    handleChooseContent(index) {
      this.newValueContent = $('#group'+index).val();

      // this.currentInputId = index; //下标
      // this.currentGroup = id; //
     // this.content = this.dynamicTags[index].content;
    },

    closeModal() {

      this.modalshow = false;
       $(".edit").css("display", "block");
          $(".save").css("display", "none");
          $("input").attr("readonly", true);
          $("input").removeClass("editDsable");
          $(".cancel").css("display", "none");

      //  if(this.newValue !== ''){
      //     $(".edit").css("display", "block");
      //     $(".save").css("display", "none");
      //     $("input").attr("readonly", true);
      //     $("input").removeClass("editDsable");
      //     $(".cancel").css("display", "none");
      // }else{
      //     this.$message.error('分组名不能为空');
      // }

      // if(this.newValueContent !== ''){
      //     $(".edit").css("display", "block");
      //     $(".save").css("display", "none");
      //     $("input").attr("readonly", true);
      //     $("input").removeClass("editDsable");
      //     $(".cancel").css("display", "none");
      // }else{
      //     this.$message.error('不能为空');
      // }
      

     
    },

  },

  created() {
    //非父子组件监听
    bus.$on("modalshow", () => {
      this.modalshow = true;
    });
  },
  mounted() {
    chat.addValidateListener(() => {
      this.defaultExhibition();
    });
    let _self = this;
    //编辑分组名的显示
    $(".left").on("click", ".edit", function() {
      $(this)
        .siblings("input")
        .removeAttr("readonly");

      $(this)
        .siblings("input")
        .addClass("editDsable");
      $(this).css("display", "none");
      $(this).siblings("input").focus();
      $(this).siblings(".cancel")
        .css("display", "block");
      $(this)
        .siblings(".save")
        .css("display", "block");
    });
    //隐藏编辑分组名
    $(".left").on("click", ".cancel", function() {
      $(this).css("display", "none");
      $(this)
        .siblings(".edit")
        .css("display", "block");
      $(this).siblings(".edit").blur();
      $(this)
        .siblings(".save")
        .css("display", "none");
      $(this)
        .siblings("input")
        .attr("readonly", true);
      $(this)
        .siblings("input")
        .removeClass("editDsable");
    });

    //编辑内容的显示
    $(".right").on("click", ".edit", function() {
      $(this)
        .siblings("input")
        .removeAttr("readonly");
      $(this)
        .siblings("input")
        .addClass("editDsable");
      $(this).siblings("input").focus();
      $(this).css("display", "none");
      $(this)
        .siblings(".cancel")
        .css("display", "block");
      $(this)
        .siblings(".save")
        .css("display", "block");
    });
    //隐藏内容
    $(".right").on("click", ".cancel", function() {
      $(this).css("display", "none");
      $(this)
        .siblings(".edit")
        .css("display", "block");
        $(this).siblings(".edit").blur();
      $(this)
        .siblings(".save")
        .css("display", "none");
      $(this)
        .siblings("input")
        .attr("readonly", true);
      $(this)
        .siblings("input")
        .removeClass("editDsable");
    });
  }
};
</script>

<style>
h3 {
  margin: 0;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

.save {
  display: none;
  position: absolute;
  right: 2.5rem;
  top: 0.5rem;
}

.cancel {
  position: absolute;
  right: 4.6rem;
  top: 0.5rem;
  display: none;
}

.right input {
  width: 83%;
  border: none;
  outline: none;
}

.el-tag {
  width: 100%;
  background: transparent;
  border: none;
  display: inline-block;
  position: relative;
  border-radius: 0;
  padding: 0.5rem;
  height: 2.5rem;
  text-align: left;
  cursor: pointer;
  line-height: 1.5rem;
}

body .left .editDsable,
body .right .editDsable {
  border: 1px solid #62bada;
}

.input-new-tag{
  width: 256px;
  border:1px solid #62bada;
  text-align: left;
  text-indent: 0;
}


.input-new-tagSecond{
  width: 596px;
  border:1px solid #62bada;
  text-align: left;
  text-indent: 0;
}

.mainBOXQuick ul li{
  text-align: left;
}

.el-tag .el-icon-close {
  position: absolute;
  right: 1rem;
  top: 0.8rem;
}

.currentEl {
  background: rgba(127, 184, 206, 0.11);
}

.settingQuick {
  position: fixed;
  background: rgba(0, 0, 0, 0.65);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 103;
}

.settingQuick .settingBox {
  width: 869px;
  background: #fff;
  margin: 9.6rem auto;
  padding: 2rem 1rem 4rem 1rem;
}

.settingQuick .settingBox h3 {
  color: #3d4e66;
  position: relative;
  text-align: left;
}

.settingQuick .settingBox h3 img {
  width: 1rem;
  position: absolute;
  right: 0;
  top: -1rem;
}

.edit {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 2.5rem;
  top: 0.8rem;
  background: url("../../assets/edit.png") center center no-repeat;
  background-size: 0.8rem;
}

.closeSetting{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 1rem;
  top: 0.8rem;
  background: url("../../assets/closeSetting.png") center center no-repeat;
  background-size: 0.8rem;
}

.skjhd {
  margin: 1rem 0;
  display: flex;
  padding-bottom: 1rem;
  width: 100%;
  border-bottom: 1px solid #eaecec;
}


.skjhd a {
  display: inline-block;
  padding: 0.5rem 2.5rem;
  font-size: 12px;
  color: #333;
}

.skjhd .active {
 
  background: #62bad9;
}

.skjhd .active a{
  color: #fff;
}

.reply span {
  font-size: 0.67rem;
  display: inline-block;
  padding: 0.5rem 1.7rem;
}

.mainBOXQuick {
  height: 300px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.mainBOXQuick .left,
.bottom {
  width: 30%;
}

.mainBOXQuick .left {
  border-right: none;
}

.mainBOXQuick .scrollbar::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.mainBOXQuick .scrollbar::-webkit-scrollbar-track-piece {
  background-color: #fff;
} /* 滚动条的内层滑轨背景颜色 */

.mainBOXQuick .scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
} /* 滚动条的外层滑轨背景颜色 */

.mainBOXQuick .scrollbar::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
} /* 滚动条的内层滑块颜色 */

.mainBOXQuick .scrollbar::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
} /* 滑轨两头的监听按钮颜色 */

.settingQuick .mainBOXQuick .left,
.settingQuick .mainBOXQuick .right {
  border: 1px solid #ebecec;
  height: 100%;
  overflow-y: auto;
}

.mainBOXQuick .right {
  width: 69%;
  border-right: 1px solid #ebecec;
  border-top: 1px solid #ebecec;
}

.mainBOXQuick ul li {
  padding: 0.7rem;
  cursor: pointer;
}

.mainBOXQuick .left ul .active {
  border-left: 2px solid #62bad9;
}

.left input {
  display: inline-block;
  padding-left: 10px;
  font-size: 14px;
  border: none;
  outline: none;
  cursor: pointer;
  width: 53%;
  background-color: transparent;
}

.settingQuick .mainBOXQuick ul li:hover {
  background: #dceef5;
}

.bottom {
  height: 2.5rem;
  border: 1px solid #ebecec;
  border-top: none;
}

.bottom ul {
  padding:0;
  display: flex;
  height: 100%;
}

.bottom ul li {
  padding: 0;
  font-size: 12px;
  line-height: 2.5rem;
  margin: 0 auto;
  cursor: pointer;
}

.settingQuick .bottom ul li:hover {
  background: none;
}

.bottomRight {
  width: 69%;
  border-bottom: 1px solid #ebecec;
  border-right: 1px solid #ebecec;
}

.bottomRight p {
  line-height: 2.5rem;
  font-size: 12px;
  margin-left: 1rem;
}
</style>
